<template>
  <Teleport to = "body">
    <div class = "di animated animate__fadeIn">
      <el-dialog
          :center = "false"
          :close-on-click-modal = "false"
          :close-on-press-escape = "false"
          :lock-scroll = "true"
          class = "dialog-settings"
          :fullscreen = "isFullScreen"
          :show-close = "false"
          :draggable = "draggable"
          :align-center = "true"
          v-model = "dialogVisible"
          @close = "beforeClose"
          width = "60%"
          :style = "dialogStyle"
      >
        <template #header = "{ close }">
          <h4>{{ title }}</h4>
          <div class = "my-header">
            <el-button
                type = "primary"
                size = "medium"
                @click = "fullScreen"
                link
                v-if = "!!isFullScreen"
            >
              <el-tooltip content = "还原">
                <user-icon
                    icon = "fa-solid fa-down-left-and-up-right-to-center"
                />
              </el-tooltip>
            </el-button>
            <el-button
                type = "primary"
                size = "medium"
                @click = "fullScreen"
                link
                v-if = "!isFullScreen"
            >
              <el-tooltip content = "最大化">
                <user-icon
                    icon = "fa-solid fa-up-right-and-down-left-from-center"
                />
              </el-tooltip>
            </el-button>
            <el-button type = "danger" size = "medium" @click = "close" link>
              <el-tooltip content = "关闭">
                <user-icon icon = "fa-solid fa-xmark"/>
              </el-tooltip>
            </el-button>
          </div>
        </template>
        <div class = "eee" :style = "elBodyStyle">
          <slot></slot>
        </div>
        <span class = "dialog-footer" v-if = "!isView">
          <el-button @click = "merge()" type = "primary">
            <user-icon icon = "save"/>
            提交</el-button
          >
          <el-button
              @click = "mergeDraft()"
              link
              type = "primary"
              v-if = "isShowSave"
          >
            <user-icon icon = "save"/>存为草稿</el-button
          >
          <el-button @click = "resetForm()" link v-if = "isShowReset">
            <user-icon icon = "undo"/>
            重置</el-button
          >
        </span>

        <slot name = "footer"></slot>
      </el-dialog>
    </div>
  </Teleport>
</template>

<script>
export default {
  name: "StarHorseDialog",
  props: {
    title: {type: String},
    visible: {type: Boolean},
    isShowReset: {type: Boolean, default: true},
    isShowSave: {type: Boolean, default: false},
    isView: {type: Boolean, default: false},
    draggable: {type: Boolean, default: false},
    isBatch: {type: Boolean, default: false},
  },
  data() {
    return {
      isFullScreen: false,
      dialogVisible: this.visible,
    };
  },
  computed: {
    dialogStyle() {
      return {
        "max-height": this.isFullScreen ? "100%" : "60%",
        // display: "flex",
        // flexDirection: "column",
      };
    },
  },
  methods: {
    beforeClose() {
      this.dialogVisible = false;
      this.$emit("closeAction");
    },
    fullScreen() {
      this.isFullScreen = !this.isFullScreen;
    },
    merge() {
      this.$emit("merge", this.isBatch);
    },
    mergeDraft() {
      this.$emit("mergeDraft", this.isBatch);
    },
    resetForm() {
      this.$emit("reset");
    },
  },
  watch: {
    visible: {
      deep: true,
      handler: function () {
        this.dialogVisible = !this.dialogVisible;
      },
    },
  },
};
</script>

<style lang = "scss" scoped>
.di {
  :deep(.el-dialog) {
    display: flex;
    flex-direction: column;

    .el-dialog__header {
      flex-shrink: 0;
      height: 60px;
      box-sizing: border-box;
      flex: none;
    }

    .el-dialog__body {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  }
}

.eee {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
  box-sizing: border-box;

  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
  }

  &::-webkit-scrollbar-thumb {
    background: #f2f2f2 !important;
    z-index: 222;
    border-radius: 8px;
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>